Fixes breadcrumb wrapping and overlapping the select all box by AllanOXDi · Pull Request #4976 · learningequality/studio

AllanOXDi · 2025-03-27T18:50:56Z

Summary

This PR fixes the overlapping of the breadcrumbs
Closes #4829

Before

Screen.Recording.2025-03-27.at.21.43.45.mov

After

Screen.Recording.2025-03-27.at.21.42.04.mov

References

#4829

akolson · 2025-04-01T12:58:02Z


+  .text-truncate{
+    overflow: hidden;
+    width:100px;


I think this would not only partially resolve the issue but would also introduce responsiveness concerns. Besides, if we really need to override the width of the component, it makes more sense do so within a wrapper instead, I think (this styling has been defined within the component itself). Better still, we can make the change in the Breadcrumbs component where I suspect the issues resides. It appears to me that the finickiness is due to the way we are handling the overflow calculations, so it will require some digging around to establish what is causing the issue.

studio/contentcuration/contentcuration/frontend/shared/views/Breadcrumbs.vue

Lines 95 to 111 in 4dc29f2

handleOverflow() {

const maxWidth = this.$refs.breadcrumbs.$el.offsetWidth;

let totalWidth = 0;

this.breadcrumbStartingIndex = 0;

this.$nextTick(() => {

if (this.$refs.breadcrumb) {

for (var i = this.$refs.breadcrumb.length - 1; i >= 0; --i) {

totalWidth += this.$refs.breadcrumb[i].$el.offsetWidth + 40;

// Bounds exceeded, go back to previous index

if (totalWidth >= maxWidth - 48) {

this.breadcrumbStartingIndex = Math.min(this.items.length - 1, i + 1);

break;

}

}

}

});

akolson

Hi @AllanOXDi. Left a few comments

akolson · 2025-04-22T12:34:45Z

Not too sure we want to commit this deleted file?

akolson · 2025-04-22T12:35:07Z

https://github.com/learningequality/studio/pull/4976/files#r2054022451

akolson · 2025-04-22T12:37:15Z

        this.$nextTick(() => {
          if (this.$refs.breadcrumb) {
            for (var i = this.$refs.breadcrumb.length - 1; i >= 0; --i) {
-              totalWidth += this.$refs.breadcrumb[i].$el.offsetWidth + 40;


Unfortunately, this still doesn't fix the issue. If anything, it would be a partial fix--in some screen sizes it works on others it doesn't

akolson · 2025-05-09T12:51:05Z

Hi @AllanOXDi Could you please retarget this to unstable? (You might have to rebase your branch on unstable)

akolson

Changes look correct to me. I have also done some manual QA (for some time now) on the fix but haven't been able to replicate the issue again. (More manual QA required). Thanks @AllanOXDi for your persistence on this issue!

AllanOXDi requested review from akolson and bjester March 27, 2025 18:51

akolson reviewed Apr 1, 2025

View reviewed changes

akolson requested changes Apr 1, 2025

View reviewed changes

rtibbles assigned akolson Apr 8, 2025

AllanOXDi changed the base branch from unstable to hotfixes April 14, 2025 14:27

AllanOXDi changed the base branch from hotfixes to unstable April 14, 2025 14:28

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from ba1ec40 to 34cd432 Compare April 15, 2025 11:01

AllanOXDi changed the base branch from unstable to hotfixes April 15, 2025 11:02

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from 34cd432 to ba1ec40 Compare April 15, 2025 11:06

AllanOXDi changed the base branch from hotfixes to unstable April 15, 2025 11:06

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from ba1ec40 to 4edb95e Compare April 17, 2025 14:16

AllanOXDi changed the base branch from unstable to hotfixes April 17, 2025 14:18

AllanOXDi changed the base branch from hotfixes to unstable April 17, 2025 14:18

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from 4edb95e to 2b9ac06 Compare April 17, 2025 14:26

AllanOXDi changed the base branch from unstable to hotfixes April 17, 2025 14:27

akolson reviewed Apr 22, 2025

View reviewed changes

Comment thread requirements.txt

Copy link
Copy Markdown

Member

akolson Apr 22, 2025 •

edited

Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not too sure we want to commit this deleted file?

akolson reviewed Apr 22, 2025

View reviewed changes

Comment thread yarn.lock Outdated

Copy link
Copy Markdown

Member

akolson Apr 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/learningequality/studio/pull/4976/files#r2054022451

akolson reviewed Apr 22, 2025

View reviewed changes

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from e77f2c3 to f83d1b7 Compare May 7, 2025 15:27

AllanOXDi added 3 commits May 9, 2025 16:12

000

70bcc50

prevents breadcrumbs overlapping the select all box

2689524

minor improvment

29a0ca2

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from f83d1b7 to 29a0ca2 Compare May 9, 2025 13:15

AllanOXDi changed the base branch from hotfixes to unstable May 9, 2025 13:15

akolson reviewed May 9, 2025

View reviewed changes

Comment thread yarn.lock Outdated

bjester reviewed May 9, 2025

View reviewed changes

Comment thread requirements.txt Outdated

revert the pilow down grade

410c928

AllanOXDi force-pushed the truncate-long-breadcrumb-title branch from 44fec86 to 410c928 Compare May 9, 2025 15:30

clean up yarn

20fd624

akolson approved these changes May 9, 2025

View reviewed changes

akolson merged commit aad86b9 into learningequality:unstable May 15, 2025
13 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fixes breadcrumb wrapping and overlapping the select all box#4976

Fixes breadcrumb wrapping and overlapping the select all box#4976
akolson merged 5 commits intolearningequality:unstablefrom
AllanOXDi:truncate-long-breadcrumb-title

AllanOXDi commented Mar 27, 2025

Uh oh!

akolson Apr 1, 2025

Uh oh!

akolson left a comment

Uh oh!

akolson Apr 22, 2025 •

edited

Loading

Uh oh!

akolson Apr 22, 2025

Uh oh!

akolson Apr 22, 2025

Uh oh!

akolson commented May 9, 2025

Uh oh!

Uh oh!

Uh oh!

akolson left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	handleOverflow() {
	const maxWidth = this.$refs.breadcrumbs.$el.offsetWidth;
	let totalWidth = 0;
	this.breadcrumbStartingIndex = 0;
	this.$nextTick(() => {
	if (this.$refs.breadcrumb) {
	for (var i = this.$refs.breadcrumb.length - 1; i >= 0; --i) {
	totalWidth += this.$refs.breadcrumb[i].$el.offsetWidth + 40;

	// Bounds exceeded, go back to previous index
	if (totalWidth >= maxWidth - 48) {
	this.breadcrumbStartingIndex = Math.min(this.items.length - 1, i + 1);
	break;
	}
	}
	}
	});

Uh oh!

Conversation

AllanOXDi commented Mar 27, 2025

Summary

Before

After

References

Uh oh!

akolson Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

akolson left a comment

Choose a reason for hiding this comment

Uh oh!

akolson Apr 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

akolson Apr 22, 2025

Choose a reason for hiding this comment

Uh oh!

akolson Apr 22, 2025

Choose a reason for hiding this comment

Uh oh!

akolson commented May 9, 2025

Uh oh!

Uh oh!

Uh oh!

akolson left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

akolson Apr 22, 2025 •

edited

Loading